@charset "utf-8";
@import "reset.scss";
@import "common.scss";
@function vw($w) {
  @return ($w/1910) * 100 + vw;
}

.wrap {
  width: 100%;

  header {
    width: 100%;

    .swiper-pagination{
     span{
      background-color: orangered;
     }
    }
    .swiper-button-prev{
      width: vw(55);
      height: vw(67);
      color: orangered;
      background-color: rgba($color: #fff, $alpha: 0.7);
    }

    .swiper-button-next{
      width: vw(55);
      height: vw(67);
      color: orangered;
      background-color: rgba($color: #fff, $alpha: 0.7);
    }

    .a {
      position: relative;

      .lunbo1 {
        width: 100%;
        height: vw(1000);
        display: block;
      }

      .baise {
        width: 100%;
        height: 100%;
        background-color: rgba($color: #fff, $alpha: 0.3);
        position: absolute;
        left: 0;
        top: 0;
      }

      .ziti-1 {
        width: vw(315);
        height: vw(160);
        position: absolute;
        z-index: 100;
        top: 30%;
        left: 42%;
      }

      .ziti-2 {
        width: vw(900);
        height: vw(70);
        position: absolute;
        z-index: 100;
        top: 48%;
        left: 26%;
      }

      .ziti-3 {
        width: vw(645);
        height: vw(65);
        position: absolute;
        z-index: 100;
        top: 56%;
        left: 33%;
      }
    }
  }

  main {
    width: 100%;

    .zhanshi {
      width: 100%;
      height: vw(475);
      display: flex;

      .zhanshi-1 {
        width: vw(635);
        height: vw(475);
        position: relative;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: vw(500);
          height: vw(110);
          position: absolute;
          left: vw(45);
          bottom: vw(40);

          p {
            color: #999999;
            font-size: vw(36);

            &:last-of-type {
              color: rgba($color: #595959, $alpha: 0.7);
              font-size: vw(25);
              letter-spacing: vw(10);
              font-weight: bold;
            }
          }
          .xian {
            width: vw(80);
            height: vw(3);
            background-color: #525253;
          }
        }

        .text2 {
          p {
            color: rgba($color: #cccccc, $alpha: 0.8);

            &:last-of-type {
              color: rgba($color: #cccccc, $alpha: 0.8);
            }
          }

          .xian {
            background-color: rgba($color: #cccccc, $alpha: 0.8);
          }
        }

        .text3 {
          p {
            color: rgba($color: #000000, $alpha: 0.8);

            &:last-of-type {
              color: rgba($color: #000000, $alpha: 0.8);
            }
          }

          .xian {
            background-color: rgba($color: #000000, $alpha: 0.8);
          }
        }
      }

      .sheji {
        width: vw(635);
        height: vw(475);
        position: relative;

        &:hover {
          .heise {
            display: none;
          }
        }

        .heise {
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.8);
          position: absolute;
          left: 0;
          top: 0;
        }
      }

      .xinwen{
        width: vw(635);
        height: vw(475);
        position: relative;

        &:hover {
          .heise {
            display: none;
          }
        }

        .heise {
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.5);
          position: absolute;
          left: 0;
          top: 0;
        }
      }

      .shipin {
        width: vw(635);
        height: vw(475);
        position: relative;

        .heise {
          width: 100%;
          height: 100%;
          background-color: rgba($color: #000000, $alpha: 0.5);
          position: absolute;
          left: 0;
          top: 0;
        }

        i {
          font-size: vw(170);
          color: rgba($color: orangered, $alpha: 0.5);
          // z-index: 100;
          position: absolute;
          left: 36%;
          top: 35%;
        }

        &:hover {
          .heise {
            display: none;
          }
        }
      }
    }

    .anli {
      height: vw(245);
      display: flex;
      justify-content: center;
      align-items: center;

      .text {
        width: vw(280);
        height: vw(80);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        p {
          font-size: vw(40);
          font-weight: bold;
        }

        span {
          font-size: vw(20);
          font-weight: bold;
          color: #d6d6d6;
          letter-spacing: vw(14);
        }
      }
    }

    .anlimax {
      width: 100%;
      height: vw(475);

      display: flex;

      .alimax-1 {
        width: vw(635);
        height: vw(475);

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }

 
}
